import { AppstoreOutlined, LeftCircleOutlined, MailOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Menu } from "antd";
import { createStyles } from "antd-style";
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

type MenuItem = Required<MenuProps>["items"][number];

const items: MenuItem[] = [
  {
    key: "/my-blog",
    icon: <MailOutlined />,
    label: "首页",
  },
  {
    key: "/my-blog/test",
    icon: <AppstoreOutlined />,
    label: "测试",
  },
];

const useStyles = createStyles(({ css }) => {
  return {
    layout_menu: css`
      overflow-y: auto;
      .ant-menu {
        border-inline-end: none !important;
        .ant-menu-item,
        .ant-menu-submenu {
          margin-top: 10px !important;
        }
      }
    `,
  };
});

const App: React.FC = () => {
  const { styles } = useStyles();
  const navigate = useNavigate();

  const [collapsed, setCollapsed] = useState(false);

  const handleOnclick = (props: { key: string }) => {
    navigate(props.key);
  };

  useEffect(() => {
    navigate("/my-blog");
  }, []);

  return (
    <div className={`${styles.layout_menu}`}>
      <Menu
        mode='inline'
        defaultSelectedKeys={[items?.[0]?.key as string]}
        inlineCollapsed={collapsed}
        items={items}
        onClick={handleOnclick}
      />
      <div className=''>
        <LeftCircleOutlined
          style={{
            fontSize: "20px",
            color: "rgba(0,0,0,0.5)",
            transition: "all 1s",
            transform: collapsed ? "rotateY(180deg)" : "",
          }}
          onClick={() => {
            setCollapsed(!collapsed);
          }}
        />
      </div>
    </div>
  );
};

export default App;
